<template>
  <div class="timeline">
    <el-timeline :reverse="reverse">
      <el-timeline-item
        v-for="(item, index) in list"
        :key="index"
        color="#6dc1a9"
        placement="bottom"
        :timestamp="item.operateTime"
      >
        <h3 class="timeline-h3">
          {{ item.operateTypeValue || "-" }}
        </h3>
        <div class="timeline-p">操作人：{{ item.operateUserName || "-" }}</div>
        <div class="timeline-p">备注：{{ item.remark || "-" }}</div>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<script setup name="Timeline">

  const props = defineProps({
    list: {
      type: Array,
      default: () => {
        return [];
      }
    },
    //指定节点排序方向
    reverse: {
      type: Boolean,
      default: false
    }
  })

</script>

<style scoped lang="scss">
.timeline {
  // display: inline-block;

  // text-align: center;
  margin-left: 18%;
  margin-right: 18%;
  height: 100%;
  width: 67%;
  .timeline-h3 {
    font-weight: 800;
    color: #6dc1a9;
    font-size: 14px;
  }
  .timeline-p {
    font-weight: 400;
    color: #a4a3a0;
    font-size: 13px;
    line-height: 1.6;
  }
}
</style>
